<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>职位列表</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.10/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<table class="layui-hide" id="job-table" lay-filter="job-table-filter"></table>

<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="//unpkg.com/layui@2.9.10/dist/layui.js"></script>
<script>
    layui.use(['table', 'laypage'], function(){
        var table = layui.table;
        var laypage = layui.laypage;

        // 渲染表格
        table.render({
            elem: '#job-table',
            url: 'http://localhost:8080/jobs/api/list', // 实际使用时需换成真实接口
            method: 'GET',
            // where: {
            //     pageNum: 1,
            //     pageSize: 5
            // },
            request: {
                pageName: 'pageNum', // 页码的参数名称，默认：page
                limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
            },
            parseData: function(res){ // res 即为原始返回的数据
                console.log(res.data)
                return {
                    "code": 0, // 解析接口状态
                    "msg": res.msg, // 解析提示文本
                    "count": res.data.total, // 解析数据长度
                    "data": res.data.list // 解析数据列表
                };
            },
            page: {
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], // 自定义分页布局
                groups: 6, // 只显示 1 个连续页码
                first: "首页", // 不显示首页
                last: "末页" // 不显示尾页
            },
            cols: [[
                {field: 'id', title: 'ID', width: 80, sort: true},
                {field: 'jobTitle', title: '职位名称', width: 150},
                {field: 'categoryName', title: '类别', width: 100},
                {field: 'city', title: '城市', width: 100},
                {field: 'company', title: '公司', width: 200},
                {field: 'companyInfo', title: '公司信息', width: 250},
                {field: 'author', title: '作者', width: 150},
                {field: 'publishTime', title: '发布时间', width: 150, templet: function(d){
                        return new Date(d.publishTime).toLocaleDateString();
                    }}
            ]]
        });

        // // 监听分页事件
        // table.on('tool(job-table-filter)', function(obj){
        //     console.log('tool(job-table-filter)...')
        //     var event = obj.event;
        //     if(event === 'prev' || event === 'next' || event === 'page'){
        //         var curr = obj.curr;
        //         console.log('curr',curr)
        //         fetchJobs(curr);
        //     }
        // });
        //
        // function fetchJobs(pageNum) {
        //     table.reload('job-table', {
        //         where: {
        //             pageNum: pageNum,
        //             pageSize: 5
        //         },
        //         page: {
        //             curr: pageNum
        //         }
        //     });
        // }
    });
</script>
</body>
</html>
